<template>
	<view v-if="info">

		<!-- 项目负责人 -->
		<view class="p-40">
			<view class="radius-10 border">
				<view class="p-14 font-26 bg-gray">项目负责人</view>
				<view class="p-14 font-24">
					<view class="flex">
						<image class="w-60 h-60" src="/static/img/default_avatar.png" mode="aspectFill"></image>
						<text class="ml-12">{{info.uid[0].username}}({{info.uid[0].nickname}})</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 组列表 -->
		<view class="mlr-40 mb-10 font-28 flex-between">
			<view>项目组 - 列表</view>
			<view @tap="layer('create-group')" class="iconfont icon-tianjia1 font-36"></view>
		</view>
		<view v-if="!info.group||info.group.length==0" class="flex-centent h-100 font-26 color-6">【此项目尚未创建组】</view>
		<view v-for="(item,index) in info.group" class="m-40 radius-10 border">
			<view class="p-14 font-26 bg-gray flex-between">
				<text>{{item.name}}</text>
				<view class="flex">
					<!-- 添加成员 -->
					<text @tap="layer('add-group-member',item)" class="iconfont icon-tianjia w-40 h-40 radius-40 bg-green color-f flex-centent font-24"></text>
					<!-- 删除项目组 -->
					<text @tap="layer('delete-group',item)" class="iconfont icon-jianhao w-40 h-40 radius-40 bg-red color-f flex-centent font-24 ml-16"></text>
				</view>
			</view>
			<view class="p-14 font-24">
				<view v-for="($item,$index) in item.members" :key="index" class="flex" :class="{'mt-12':$index>0}">
					<block v-if="$item.username">
						<image class="w-60 h-60" src="/static/img/default_avatar.png" mode="aspectFill"></image>
						<text class="ml-12">{{$item.username}}({{$item.nickname}})</text>
					</block>
					<text v-else class="m-15 color-6 font-22">【数据获取中...】</text>
				</view>
				<view v-if="!item.members||item.members.length==0" @tap="layer('add-group-member',item)"
					class="flex-centent h-60 font-26 color-6">【点击请添加组员】</view>
			</view>
		</view>


		<!-- 创建组 -->
		<bottom-layer ref="create-group" title="创建项目组" @confirm="createGroup">
			<view class="m-40">
				<view class="flex-between mb-30">
					<text class="color-3 font-26 w-170 font-right">
						<text class="color-red">*</text>
						<text>项目组名称：</text>
					</text>
					<view class="border flex-1 radius-6">
						<input v-model="groupName" class="ptb-14 plr-20 font-26" type="text" placeholder="请输入项目名称"
							placeholder-class="color-9" />
					</view>
				</view>
			</view>
		</bottom-layer>
		
		<!-- 删除组 -->
		<bottom-layer ref="delete-group" title="删除组" @confirm="deleteGroup">
			<view class="m-40 font-26 color-6">确定要删除：<text class="color-blue">【{{groupItem.name}}】</text> 这个分组吗？</view>
		</bottom-layer>
		
		<!-- 添加组成员 -->
		<bottom-layer ref="add-group-member" title="添加组成员" @confirm="addGroupMember">
			<view class="m-40">
				<view class="flex-between mb-30">
					<text class="color-3 font-26 w-170 font-right">
						<text class="color-red">*</text>
						<text>项目组名称：</text>
					</text>
					<view class="flex-1 ">
						<input v-model="groupItem.name" class="ptb-14 font-26" disabled type="text" />
					</view>
				</view>
				<view class="flex-between mb-30" style="align-items: flex-start;">
					<text class="color-3 font-26 w-170 font-right">
						<text class="color-red">*</text>
						<text>项目组成员：</text>
					</text>
					<view class="flex-1">
						<view v-if="!groupItem.members||groupItem.members.length==0" class="font-26 color-6">【无】</view>
						<view class="flex-between font-22 color-6 mb-24" v-for="(item,index) in groupItem.members" :key="index">
							<view class="flex">
								<image class="w-40 h-40" src="/static/img/default_avatar.png" mode="aspectFill"></image>
								<text class="ml-10">{{item.username}}</text>
							</view>
							<view @tap="delUser(item)" class="font-24 bg-red color-f ptb-6 plr-20 radius-4" >删除</view>
						</view>
						
						<view class="flex-between mt-20">
							<view class="flex-1 flex-between border p-10 mr-10 radius-10">
								<text class="iconfont icon-sousuo mr-10"></text>
								<input v-model="selectUser" class="flex-1 font-26" type="text" placeholder="搜索成员"
									placeholder-class="color-6" />
							</view>
						</view>
						<view class="flex-between font-22 color-6 mt-24" v-for="(item,index) in filterUserList" :key="index">
							<view class="flex">
								<image class="w-40 h-40" src="/static/img/default_avatar.png" mode="aspectFill"></image>
								<text class="ml-10">{{item.username}}</text>
							</view>
							<view @tap="addUser(item)" class="font-24 bg-blue color-f ptb-6 plr-20 radius-4" >添加</view>
						</view>
					</view>
				</view>
			</view>
		</bottom-layer>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: null,

				groupName: '', //创建组时的组名称

				groupItem: {}, //添加组成员-当前组的数据

				userList: [], //所有用户列表
				selectUser: '', //所有用户关键词

			};
		},
		onLoad(e) {
			if (e && e.id){
				uni.showLoading({
					title:'请稍后...'
				})
				this.getProjectInfo(e.id)
			}
			else {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		},
		created() {
			this.getUserList()
		},
		computed: {
			filterUserList() {
				let arr = []
				if (this.selectUser) {
					arr = JSON.parse(JSON.stringify(this.userList))
					arr = arr.filter(item => {
						if (item.username.includes(this.selectUser) || item.nickname.includes(this.selectUser))
							return item
					})
				}
				return arr
			},
		},
		methods: {
			// 项目详情
			async getProjectInfo(_id) {
				const db = uniCloud.database();
				let { result } = await db.collection('project-list,project-group,uni-id-users').where({
					_id
				}).field('name,code,uid{username,nickname,avatar},createTime,group{name,members}').get({
					getOne: true
				})
				uni.hideLoading()
				if (result.code != 0) return this.$toast('项目详情数据获取失败')
				
				this.info = result.data
				this.info.group.forEach(item=>{
					if(!item.members||item.members.length==0) return
					db.collection('uni-id-users').where(`_id in ${JSON.stringify(item.members)}`).field('username,nickname').get()
					.then(res=>{
						if(res.result.code!=0) return
						item.members = res.result.data
					})
				})
				
				let members = JSON.stringify(result.data.group[0].members)
				
				uni.setNavigationBarTitle({
					title: this.info.name
				})
			},

			// 创建组
			async createGroup() {
				if (!this.groupName) return this.$toast('请输入项目组名称')

				const db = uniCloud.database();
				let {
					result
				} = await db.collection('project-group').add({
					name: this.groupName
				})
				if (result.code != 0) return this.$toast(result.errMsg || '创建失败，请稍后再试')
				
				let data = this.info.group.map(item=>item._id)
				data.push(result.id)
				
				let res = await db.collection('project-list').where({
					_id: this.info._id
				}).update({
					group: data
				})
				this.$toast('创建成功')
				this.$refs['create-group'].close()
				this.getProjectInfo(this.info._id)
			},
			
			// 删除组
			async deleteGroup(){
				uni.showLoading({
					title:'请稍后...'
				})
				const db = uniCloud.database();
				let { result } = await db.collection('project-group').where({_id:this.groupItem._id}).remove()
				if(result.code!=0) return this.$toast(result.errMsg||'删除失败')
				this.$toast('删除成功')
				this.$refs['delete-group'].close()
				this.getProjectInfo(this.info._id)
			},

			// 添加组成员
			async addGroupMember() {
				const db = uniCloud.database();
				let {result} = await db.collection('project-group').where({_id:this.groupItem._id}).update({
					members:this.groupItem.members.map(item=>item._id)
				})
				if(result.code!==0) return this.$toast(result.errMsg||'添加成员失败，请稍后再试')
				this.getProjectInfo(this.info._id)
				this.$toast('操作成功')
				this.$refs['add-group-member'].close()
			},
			
			// 点击删除成员
			delUser(item){
				this.groupItem.members.splice(this.groupItem.members.indexOf(item),1)
			},
			
			// 点击添加成员
			addUser(item){
				let flag = this.groupItem.members.some(user=>user._id==item._id)
				if(flag) return this.$toast('已在组内，不能重复添加')
				this.groupItem.members.push(item)
			},

			// 获取所有成员列表
			async getUserList() {
				const db = uniCloud.database();
				let { result } = await db.collection('uni-id-users').field('username,nickname,avatar').get()
				if (result.code !== 0) return
				this.userList = result.data
			},

			// 打开弹窗
			layer(name, item) {
				if(item) this.groupItem = JSON.parse(JSON.stringify(item))

				// 添加组成员
				if (name == 'add-group-member'){
					
					if(!this.groupItem.members) this.groupItem.members = []
				}

				this.$refs[name].open()
			},
		}
	}
</script>

<style lang="scss">

</style>
